$(function () {

    // 自定义验证规则
    let layer = layui.layer;
    let form = layui.form;
    form.verify({
        nickname: function (value) {
            if (value.length > 6) {
                return '昵称为1-6位之间'
            }
        }
    });
    // 获取数据
    initUserInfo();

    function initUserInfo() {
        $.ajax({
            url: '/admin/user/detail',
            type: 'get',

            success: (res) => {
                console.log(res);
                // form.val('formUserInfo', res.data)
                $("[name=username]").val(res.data.username)
                $("[name=nickname]").val(res.data.nickname)
                $("[name=email]").val(res.data.email)
                $("[name=password]").val(res.data.password)


                let newImgURL = res.data.userPic;
                $image.cropper('destroy').attr("src", newImgURL).cropper(options)
            }
        })
    }

    // 初始化图片裁剪区域
    // 初始化图片裁剪区域
    let $image = $("#image");
    let options = {
        aspectRatio: 1,
        preview: '.img-preview'
    }
    $image.cropper(options)
    // 上传
    $("#btnChooseImage").on("click", function () {
        $("#file").click();
    })
    // 设置图片
    $("#file").change(function (e) {
        // 拿到用户选择的图片
        let file = this.files[0];
        console.log(typeof file);

        // 非空校验
        if (file == undefined) {
            return '请选择图片!'
        }


        // 将url设置给img的src属性，显示图片

        // // 根据选择图片，创建一个对应的URL路径
        let newImgURL = URL.createObjectURL(file)
        // console.log(typeof newImgURL);
        $('#file').attr('src', newImgURL);
        // console.log($('#coverFile').attr('src'));

        $image.cropper('destroy').attr('src', newImgURL).cropper(options)
    })
    // 重置
    $("#btnReset").on("click", function (e) {
        e.preventDefault()
        initUserInfo();
    })

    // 表单提交
    $(".layui-form").on("submit", function (e) {
        e.preventDefault();
        let fd = new FormData(this)
        $.ajax({
            url: '/admin/user/edit',
            type: 'post',
            data: fd,
            contentType: false,
            processData: false,
            success: (res) => {
                if (res.code !== 200) {
                    return layer.msg(res.msg, {
                        icon: 5
                    })
                }
                layer.msg("恭喜您,修改用户信息成功!", {
                    icon: 6
                })
                initUserInfo();
                getUserInfo();
            }
        })
    })

})